<template>
  <c-checkbox-group
    v-bind="$attrs"
    v-on="$listeners"
    v-model="arrayValue"
    :options="options"
    @change="hangleChange"
  ></c-checkbox-group>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  model: {
    prop: 'value',
    event: 'getValue',
  },
  data() {
    return {
      arrayValue: [],
      loading: false,
      options: [],
    }
  },
  computed: {},
  watch: {
    value: {
      handler: function (val) {
        this.arrayValue = val ? val?.split(',') : []
      },
      immediate: true,
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData({
          table: 'system_enum',
          params: {
            'enum_field.eq': 'industrial_package.gua_method',
          },
        })
        .then(res => {
          this.options = (res?.data || []).map(item => {
            return {
              label: item.enum_value,
              value: item.enum_key,
            }
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    hangleChange(val) {
      let label = ''

      if (val) {
        const labels = []
        for (let p of val) {
          const select = this.options.find(item => item.value === p) || {}
          labels.push(select.label || '')
        }
        label = labels.join(',')
      }
      this.$emit('select', label)
      this.$emit('getValue', val?.join(',') ?? '')
    },
  },
}
</script>

<style lang="scss" scoped></style>
